<template>
  <div>
    <h1 style="color: orange">个人中心页面</h1>
    <el-form label-width="80px" style="width: 500px;">
      <el-form-item label="头像">
            <!--    组件上传    -->
          <el-upload
              :action="this.BASE_URL+'/v1/upload'"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handlerSuccess"
              >
            <i class="el-icon-plus"></i>

          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
      </el-form-item>

      <el-form-item label="昵称">
        <el-input placeholder="请输入昵称" v-model="user.nickname"></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input disabled v-model="user.username"></el-input>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" @click="updateUser()">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      user:localStorage.user ? JSON.parse(localStorage.user):null,

    }
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file) {
      console.log(file);
      this.axios.post(this.BASE_URL+'/v1/remove?url='+file.response.data)
      .then(res=>{
        if(res.data.code == 1){
          this.$message.success("删除服务的图片成功！！")
        }else{
          this.$message.error(res.data.msg)
        }
      })
    },
    handlerSuccess(file){
      console.log(file)
      //上传文件成功后将文件的响应路径添加给用户对象
      this.user.imgUrl = file.data
    },
    updateUser(){
      this.axios.put(this.BASE_URL+'/v1/users/update',this.qs.stringify(this.user))
      .then(res=>{
        if(res.data.code == 1){
          this.$message.success("修改成功")
          console.log(this.user)
          localStorage.setItem('user',JSON.stringify(this.user))
          location.reload()
        }else{
          this.$message.error(res.data.msg)
        }
      })
    }
  },
}
</script>

<style scoped>

</style>
